{% extends "layout.njk" %}

{# 设置标题 #}
{% block title %}
    发布新话题
{% endblock %}

{# 设置样式 #}
{% block css %}
    {{super()}}
    <!-- Simditor -->
    <link rel="stylesheet" type="text/css" href="/simditor/styles/simditor.css">
    <!-- 发布话题和编辑话题使用的样式-->
    <link rel="stylesheet" type="text/css" href="/stylesheets/topic-edit.css">
{% endblock %}

{# 设置脚本 #}
{% block js %}
    {{super()}}
    <!-- Simditor -->
    <script type="text/javascript" src="/simditor/scripts/module.js"></script>
    <script type="text/javascript" src="/simditor/scripts/hotkeys.js"></script>
    <script type="text/javascript" src="/simditor/scripts/uploader.js"></script>
    <script type="text/javascript" src="/simditor/scripts/simditor.js"></script>
{% endblock %}

{# 设置主区域 #}
{% block main %}
    <div class="container">
        <form action="/topic/publish" method="post">
        <div class="topic-edit">
                <input type="text" name="title" placeholder="请输入标题" autofocus>
                <textarea name="content"></textarea>
                <script>
                    new Simditor( { 
                        textarea: $( '[name=content]' ) ,
                        placeholder: '请输入内容' ,
                        defaultImage: '/images/kaifamiao.jpg',
                        toolbar: [ 'title', 'bold' , 'italic' , 'underline' ,'strikethrough',
                                    'fontScale','color','ol','ul','blockquote', 'code' ,
                                    'table','link','image','hr','indent','outdent','alignment' ],
                        upload: {
                            url: '/image/upload' ,
                            fileKey: 'upfile' 
                        } 
                    } );
                </script>
        </div>
        <div class="topic-buttons">
            <button type="submit" class="btn btn-primary">发布</button>
            <button type="reset" class="btn btn-secondary">重置</button>
        </div>
        </form>
    </div>
{% endblock %}